<script lang="ts">
import { defineComponent, ref } from 'vue'
import { FormInst } from 'naive-ui'
import {encodePassword} from "../shell.js"


export default defineComponent({
  setup () {
    const formRef = ref<FormInst | null>(null)
    return {
      formRef,
      size: ref<'small' | 'medium' | 'large'>('medium'),
      formValue: ref({
        user: {
          name: '',
          password: ''
        },
      }),
      handleValidateClick (e: MouseEvent) {
        e.preventDefault()
        const user = formRef.value.model.user;
        const {name,password}=user;
        const res = encodePassword(password);
        console.info(res)
        

      }
    }
  }
})
</script>
<template>
<n-card title="登录" hoverable>
  <n-form
    ref="formRef"
    inline
    :label-width="80"
    :model="formValue"
    :size="size"
  >
    <n-form-item label="用户名" path="user.name">
      <n-input v-model:value="formValue.user.name" placeholder="输入用户名" />
    </n-form-item>
    <n-form-item label="密码" path="user.password">
      <n-input v-model:value="formValue.user.password" type="password" placeholder="输入密码" />
    </n-form-item>
    <n-form-item>
      <n-button attr-type="button" @click="handleValidateClick">
        登录
      </n-button>
    </n-form-item>
  </n-form>
  </n-card>
</template>
